<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>

<link rel="Stylesheet" type="text/css" href="/Mass_template/common/wColorPicker/src/wColorPicker.css" />
<script type="text/javascript" src="/Mass_template/common/wColorPicker/lib/rgbHex.min.js"></script>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		mySheet.SetConfig({ChildPage:5});
		var headers = [
			{Text:"상태|삭제|구/동|우편번호|주소|트리\n레벨", Align:"Center"}
		];
		var cols = [
			{Type:"Status", Align:"Center"},
			{Type:"DelCheck", Align:"Center"},
			{Type:"Text", Width:350, TreeCol:1,LevelSaveName:"TREELEVEL"},
			{Type:"Text", Width:65, Align:"Center",Format:"PostNo"},
			{Type:"Text", Width:370, Align:"Left"},
			{Type:"Int", Width:40, Align:"Center"}
		];
		
		mySheet.InitHeaders(headers);
		mySheet.InitColumns(cols);
		mySheet.SetExtendLastCol(1);
	
		//컬럼의 너비 조정
		mySheet.FitColWidth();
		
		doAction("search");
	});

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		switch (sAction) {
		case "search": //조회
			mySheet.DoSearch("../data/tree_data.xml");
			break;
		}
	}
	
</script>
<title>트리 아이콘 변경 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">트리 아이콘 변경 예제</div>
	<div id="desc">
		트리이미지와 css 파일 수정 방법<br>
		<br>
		제공되는 ibsheet 스크립트 폴더 안에 js 폴더가 있고 테마 관련된 폴더들이 존재한다.(기본값 : Main)<br>
		테마 폴더 안에 Tree.gif 와 TreeN.gif 가 있는데, 정해진 이미지 및 간격에 맞게 다시 그려야 한다.<br>
		
		<!-- 
		테마 폴더 안에 <u>ibsheet.css</u> 파일이 있다.<br>
		ibsheet.css 파일을 열면 106 ~ 175 라인까지 Tree Img with lines 라고 구분된 곳에서 트리 내용을 수정할 수 있다.<br>
		<br>
		/* Tree Img with lines */<br>
		.GM000,.GM010,.GM001,.GM011,.GM100,.GM110,.GM101,.GM111,<br>
		.GM000T,.GM010T,.GM001T,.GM011T,.GM100T,.GM110T,.GM101T,.GM111T,<br>
		.GM00,.GM01,.GM10,.GM11,.GM00T,.GM01T,.GM10T,.GM11T,<br>
		.GM0T,.GM1T,.GM0TL,.GM1TL,.GM0C,.GM1C,.GM0CL,.GM1CL,.GM0E,.GM1E,.GM0EL,.GM1EL,<br>
		.GM0,.GM1,.GMT,.GMTL,.GMC,.GMCL,.GME,.GMEL,.GMD0,.GMD1,.GMD2,.GMD3,.GMD4,.GMD0L,.GMD1L,.GMD2L,.GMD3L,.GMD4L<br> 
		{background-image:url(Tree.gif); vertical-align:top;}<br>
		(이하 생략)<br>
		<br>
		트리 이미지는 Tree.gif 와 TreeN.gif 파일에서 필요한 부분을 잘라서 화면에 보여주는 형식을 취하고 있다.
		</div>
		-->
	</div>
	<!--
	<div align="right">
		<input type="button" value="초기화" onclick="doAction('init')">
		<input type="button" value="조회" onclick="doAction('search')">
	</div>
	<div id="functionArea">
	</div>
	-->
	<div id="viewArea">
	</div>
</div>
</body>
</html>